

<template>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group> -->
    <el-menu default-active="/home" class="full" :collapse="true" @open="handleOpen" @close="handleClose">

        <el-menu-item v-for="item in routeList" :index="item.path" @click="changeRouter(item)">
            <el-icon><icon-menu /></el-icon>
            {{ item.name || "" }}
        </el-menu-item>

    </el-menu>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router"
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const router = useRouter()
const routeList = reactive([
    // {
    //     name: "首页",
    //     path: "/"
    // },
    {
        name: "sheet",
        path: "/luckysheet"
    },

])
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
function changeRouter(data) {
    console.log(data.path);
    router.push({
        path: data.path
    })

}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
